<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加出货记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="DemandWarehouse.radio2"  size="mini" v-verify="DemandWarehouse.radio2">
                <el-radio :label="0">预包装食品</el-radio>
                <el-radio :label="1">食用农场品</el-radio>
                <el-radio :label="2">散装加工食品</el-radio>
              </el-radio-group>
            </div>
          </li>
          <li>
            <span><em>*</em>食品类别</span>
             <div class="froms">
              <el-select v-model="DemandWarehouse.Foodtype" placeholder="请选择食品类别" name="Foodtype" v-validate="'required'" :class="{'is-danger': errors.has('Foodtype')}">
                <el-option
                  v-for="item in Category"
                   :key="item.unid"
                  :value="item.id"
                  :label="item.name">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>食品名称</span>
            <div class="froms">
              <input @click="DemandWarehousehandleClick"  type="button" class="text_l" v-model="DemandWarehouse.Name" v-verify="DemandWarehouse.Name">
            </div>
             <mt-popup v-model="DemandWarehouseNamepup" position="right" modal=false class="mint-popup-3">
                 <!--进货记录-->
                  <app-purchase  v-on:listenToChildEvent="foodClick" v-on:listencloseclick="clickmodl"></app-purchase> 
              </mt-popup>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===1" >
            <span><em>*</em>品牌</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Brand"  name="Brand" v-validate="'required'" :class="{'is-danger': errors.has('Brand')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0">
            <span><em>*</em>规格净含量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Norms" name="Norms" v-validate="'required'" :class="{'is-danger': errors.has('Norms')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===2">
            <span>生产日期批号</span>
            <div class="froms">
              <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="DemandWarehouse.dataValue"
                @click="openPicker()">
              </el-input>
             <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCancel" @confirm="handleConfirm"></mt-datetime-picker>
            </div>

          </li>
          <li v-if="DemandWarehouse.radio2 ===0||DemandWarehouse.radio2===2">
            <span><em>*</em>生产商</span>
            <div class="froms">
              <input type="text"  v-model="DemandWarehouse.Producers" name="Producers" v-validate="'required'" :class="{'is-danger': errors.has('Producers')}">
            </div>
          </li>
          <li>
            <span><em>*</em>出库数量</span>
            <div class="froms">
               <input type="text" v-model="DemandWarehouse.Shipments"   name="Shipments" v-validate="'required'" :class="{'is-danger': errors.has('Shipments')}">
            </div>
          </li>
          <li>
            <span><em>*</em>数量单位</span>
            <div class="froms">
                <input type="text"  v-model="DemandWarehouse.Unit"  name="Unit" v-validate="'required'" :class="{'is-danger': errors.has('Unit')}">
            </div>
          </li>
          <li>
            <span>出货日期</span>
            <div class="froms">
             <el-input
                placeholder="请选择日期"
                icon="date"
                :disabled="true"
                v-model="DemandWarehouse.dataValue2"
                @click="openPickerStockDate()">
              </el-input>
               <mt-datetime-picker ref="picker2" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueStockDate" @cancel="handleCancelStockDate" @confirm="handleConfirmStockDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>记录人员</span>
            <div class="froms">
              <input type="text" disabled v-model="DemandWarehouse.RecordPersonName" name="RecordPersonName" v-validate="'required'" :class="{'is-danger': errors.has('RecordPersonName')}">
            </div>
          </li>
          <li>
            <span><em>*</em>记录时间</span>
            <div class="froms">
                {{this.DemandWarehouse.datatime}}
            </div>
          </li>
        </ul>
        <app-upload 
          :getuniddata="imgData.getuniddata" 
          :UserUnid="imgData.UserUnid" 
          :AliasData="imgData.AliasData" 
          :AliasDataSort="imgData.AliasDataSort"
          :uploadmsg="imgData.uploadmsg" 
          :no="imgData.no"></app-upload>
      </div> 
    </main>
  </div>
</template>

<script>
import AppUpload from '@/components/upload'
import jhjllist  from '@/components/jhjllist'
import {
  DemandTypeBind,DemandCertificateOutputAdd,DemandCertificate
} from '../../api/api';
/*附件*/
import {
  GetGuid,UploadSingleFile,FileData,DeleteFile
} from '../../api/api';
import {Loadmore,Popup,DatetimePicker} from 'mint-ui';

var moment = require('moment');
import Exif from 'exif-js';
export default {
  components: {
    'mt-datetime-picker': DatetimePicker,
    'mt-popup':Popup,
    'v-loadmore': Loadmore,
    'app-upload': AppUpload,
    'app-purchase':jhjllist
  },
  data() {
    return {
      popupVisible:false,
      DemandWarehouseNamepup:false,
      pickerValue:moment().format('YYYY-MM-DD'),
      label:'',
      pickerValueStockDate:moment().format('YYYY-MM-DD'),
      startDate: new Date(),
      CriteriaList: [],
      //表单
      DemandWarehouse:{
        radio2:0,
        Foodtype:'',
        Name:'请选择食品名称',
        Brand:'',
        Foodunid:'',
        Norms:'',
        Shipments:'',
        Num:'',
        Producers:'',
        Unit:'',
        RecordPersonName:JSON.parse(localStorage.getItem('auth')).enterpriseName,
        dataValue:'',
        dataValue2:'',
        DeadlineDate:'',
        datatime:this.datatime(),  
      },
      Category:[],//食品类别
      Purchase:[],//进货记录
      PageSize:5,
      CurrentPage:1,
      seachtext:'',
      //上传图片
      headerImage: '',
      picValue: '',
      //unidoption:'',
      FileDatalist: [],
      imgData : {
        getuniddata: '',
        UserUnid: '',
        AliasData: '',
        AliasDataSort: '',
        uploadmsg:'上传购票票据，食品合格证明文件',
        no:true
      }
    };
  },
  methods: {
       //获取32unid
      getunid: function() {
        //调取接口
        this.imgData.UserUnid = JSON.parse(localStorage.getItem('auth')).UserUnid;
        GetGuid().then((res) => {
          if (res.success === true) {
            this.imgData.getuniddata = res.data;
          }
        })
      },
      //食品类别
      Categoryunid:function(){
      let  Categoryunid = {
        params: {
          enterpriseUnid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid
        }
      }
      DemandTypeBind(Categoryunid).then((res) => {
        if (res.success === true) {
         this.Category=res.data
        }
      })
      },
     //获取当前时间
      datatime: function() {
        var moment = require('moment');
        var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
        return currentdate;
      },
    //生产日期时间
    openPicker() {
      this.$refs.picker.open();
    },
    handleCancel() {
      let _this = this
      _this.pickerValue = _this.DemandWarehouse.dataValue
    },
    // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
    handleConfirm(val) {
      let _this = this
      _this.DemandWarehouse.dataValue = moment(val).format('YYYY-MM-DD 00:00:00')
    },
  //出货日期
    openPickerStockDate() {
      this.$refs.picker2.open();
    },
    handleCancelStockDate() {
      let _this = this
      _this.pickerValueStockDate = _this.DemandWarehouse.dataValue2
    },
    // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
    handleConfirmStockDate(val) {
      let _this = this
      _this.DemandWarehouse.dataValue2 = moment(val).format('YYYY-MM-DD 00:00:00')
    },

    
    //食品名称开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      foodClick:function(data){
        this.DemandWarehouse.Name =data.foodname;
        this.DemandWarehouse.Brand = data.foodbrand;
        this.DemandWarehouse.Norms = data.foodnorms;
        this.DemandWarehouse.Foodunid= data.foodunid;
        this.clickmodl();
    },
      DemandWarehousehandleClick: function() {
        this.DemandWarehouseNamepup = true
        this.Purchase = [];
        //进货记录获取
      },
      clickmodl:function() {
         this.DemandWarehouseNamepup = false
      },
     //食品名称结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
     //提交方法
    submitForm: function() {
       this.$validator.validateAll().then((result) => {
        if (result) {
      let varDemandWarehouse = {
        DemandType: {
          Unid: this.DemandWarehouse.Foodunid,
        },
        Name: this.DemandWarehouse.Name,
      }
      let varEnterpriseUnid = {
        Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
      }
      let data = {
        Unid: this.imgData.getuniddata,
        Type: this.DemandWarehouse.radio2,
        DemandWarehouse:varDemandWarehouse,
        Brand: this.DemandWarehouse.Brand,
        Norms: this.DemandWarehouse.Norms,
        Producers: this.DemandWarehouse.Producers,
        ProductionDate: this.DemandWarehouse.dataValue,
        Unit: this.DemandWarehouse.Unit,
        Shipments: this.DemandWarehouse.Shipments,
        StockDate: this.DemandWarehouse.dataValue2,
        RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
        RecordPersonUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        RecordDate: this.DemandWarehouse.datatime,
        Enterprise: varEnterpriseUnid,
        EnterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
      }
      let dataoption = {
        params: {
          Type: this.DemandWarehouse.radio2,
          Data: JSON.stringify(data),
          UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
        }
      }
      //调取接口
      DemandCertificateOutputAdd(dataoption).then((res) => {
        if (res.success === true) {
          this.$message.success('保存成功');
          this.$router.go(-1);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(function() {
        this.$message.error('网络异常。');
      })
        }
        else{
 this.$message.error('带*号为必填项，请确认填写格式正确');
        }
       })
 
    }
  },
  mounted() {
    this.getunid(); //获取unid
    this.Categoryunid();
    
  }
}
</script>
<style lang="scss">

.uploadbox{ position:relative;    margin:20px 0px; padding-left:10px}
.img-btnbox{
    position: absolute;
    right: 10px;
    top: -5px;
    width:25px;
    height:25px;
    overflow: hidden;
}
.showclick{
    position: relative;
    cursor: pointer;
    color: #888;
    background:url("../../img/add.png") no-repeat;
    background-size:contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input{
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    width: 100%;
    height: 100%;
    }
}
.el-radio__label{margin-top: 2px;}
.disabled{ display:none}
//重构
.items-text{
  p{
    margin: 0em !important;
    padding: 0em !important;
    line-height: 20px;
  }
}
</style>
